<template>
  <base-breadcrumb>
    <div v-loading="loading">
      <a-card :bordered="false">
        <title-name title="基础信息" />

        <a-row :gutter="24">
          <a-col
            :md="8"
            :sm="8"
          >
            <a-form-item
              label="分包商名称"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput
                v-model="dels.subcontractors"
                disabled
              />
            </a-form-item>
          </a-col>
          <a-col
            :md="16"
            :sm="16"
          >
            <a-form-item
              label="所属单位"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput
                :value="unit"
                disabled
              />
            </a-form-item>
          </a-col>
<!--          <a-col-->
<!--            :md="8"-->
<!--            :sm="8"-->
<!--          >-->
<!--            <a-form-item-->
<!--              label="项目名称"-->
<!--              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"-->
<!--              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"-->
<!--            >-->
<!--              <BaseInput-->
<!--                v-model="dels.projectName"-->
<!--                disabled-->
<!--              />-->
<!--            </a-form-item>-->
<!--          </a-col>-->
        </a-row>
        <a-row :gutter="24">
          <a-col
            :md="8"
            :sm="8"
          >
            <a-form-item
              label="项目编号"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput
                v-model="dels.projectNum"
                disabled
              />
            </a-form-item>
          </a-col>
          <a-col
            :md="8"
            :sm="8"
          >
            <a-form-item
              label="分包商联系人"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput
                v-model="dels.contacts"
                disabled
              />
            </a-form-item>
          </a-col>
          <a-col
            :md="8"
            :sm="8"
          >
            <a-form-item
              label="联系人电话"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput
                v-model="dels.contactPhone"
                disabled
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col
            :md="8"
            :sm="8"
          >
            <a-form-item
              label="资质类别等级"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput
                v-model="dels.certificateLevel"
                disabled
              />
            </a-form-item>
          </a-col>
          <a-col
            :md="8"
            :sm="8"
          >
            <a-form-item
              label="统一社会信用代码"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput
                v-model="dels.businessLicense"
                disabled
              />
            </a-form-item>
          </a-col>
          <a-col
            :md="8"
            :sm="8"
          >
            <a-form-item
              label="安全生产许可证"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput
                v-model="dels.productionNum"
                disabled
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col
            :md="8"
            :sm="8"
          >
            <a-form-item
              label="考核时间"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <div style="display:flex;">
                <a-select
                  v-model="dels.assessmentTime"
                  style="width: 100%"
                  @change="getAssessmentTime"
                  @popupScroll="scrollMore"
                >
                  <a-select-option
                    v-for="item in assessmentTimes"
                    :key="item"
                    :value="item"
                  >
                    {{ item }}
                  </a-select-option>
                </a-select>
                <a-button type="primary" @click="searchData">确定</a-button>
              </div>
            </a-form-item>
          </a-col>
          <a-col span="8">
            <a-form-item
              label="考核总分"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput v-model="dels.assessmentScore" disabled />
            </a-form-item>
          </a-col>
          <a-col span="8">
            <a-form-item
              label="考核等级"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput v-model="dels.assessmentLevel" disabled />
            </a-form-item>
          </a-col>
        </a-row>

        <title-name title="考核信息" />

        <!--<div style="margin-bottom: 20px">-->
        <!--<a-button type="primary">导出</a-button>-->
        <!--</div>-->

        <print-button
          :print-content="htmlData"
          :before-print-fn="getQuarterAssessmentDoc"
          style="margin-bottom: 20px"
        />

        <a-table
          bordered
          :pagination="false"
          :columns="columns"
          :data-source="data"
        >
          <template slot="serial" slot-scope="text, record, index">{{ index + 1 }}</template>
          <template :slot="scoreIndex1" slot-scope="text, record,index">
            <span v-if="record[scoreIndex1] == undefined || record[scoreIndex2] == undefined" />
            <span v-if="record[scoreIndex1] != undefined ">{{ record[scoreIndex1] }}</span>
          </template>
          <template :slot="scoreIndex2" slot-scope="text, record,index">
          <span v-if="record[scoreIndex2] == undefined" class="notScore">未评分
            <img width="20px" height="20px" src="../../../assets/icons/notScore.png">
          </span>
            <span v-if="record[scoreIndex2] != undefined ">{{ record[scoreIndex2] }}</span>
          </template>
          <template :slot="scoreIndex3" slot-scope="text, record,index">
            <ellipsis :length="40" tooltip>{{ text }}</ellipsis>
          </template>
          <template :slot="scoreIndex4" slot-scope="text, record,index">
            <ellipsis :length="40" tooltip>{{ text }}</ellipsis>
          </template>
          <template :slot="scoreIndex" slot-scope="text, record,index">
            <span v-if="record[scoreIndex] == undefined ">无</span>
            <span v-if="record[scoreIndex] != undefined ">{{ record[scoreIndex] }}</span>
          </template>
        </a-table>
      </a-card>
      <div class="page-btn-right-top">
        <a-button type="primary" @click="$close">关闭</a-button>
      </div>
    </div>
  </base-breadcrumb>
</template>

<script>
import { STable, Ellipsis } from '@/components'
import {
  getMonthHeaders,
  getMonthContent,
  getQuarterDetails,
  getQuarterDetailsTotal,
  getQuarterly,
  getQuarterAssessmentDoc
} from '@/api/subcontractors/quarterAssessment'
import printButton from '@/components/BasePrintButton'
import ARow from 'ant-design-vue/es/grid/Row'

export default {
  name: 'a' + Date.now(),
  components: {
    ARow,
    printButton,
    Ellipsis
  },
  data() {
    return {
      loading: false,
      htmlData: '',
      columns: [], // 表头
      data: [],
      dels: {},   // 获取分包商管理基本信息对象
      assessmentId: '',
      assessmentTimes: [],
      subcontractorId: '', // 分包商id
      scoreIndex: '',  // 实际评分的dataIndex
      scoreIndex1: '', // 实际考核人员的dataIndex
      scoreIndex2: '', // 状态的dataIndex
      scoreIndex3: '', // 扣分标准的dataIndex
      scoreIndex4: '', // 主要检查的dataIndex
      pageNo: 1,   // 调入人员分页
      pageSize: 20,    // 调入人员分页数量
      totalPages: 0,    // 总页数
      unit: ''
    }
  },

  created() {
    this.assessmentId = this.$route.query.assessmentId
    this.getData()
  },
  methods: {
    getQuarterAssessmentDoc() {
      let that = this
      return new Promise((resolve, reject) => {
        let data = { templateCode: 'CSCEC8XN-SG-B11007', businessId: this.assessmentId }
        getQuarterAssessmentDoc(data).then(res => {
          if (res.code == 200 || res.data.code === 200) {
            resolve(res.data.content)
          }
        }).catch((e) => {
          that.$message.error(e)
        }).finally(() => {
          resolve()
        })
      })

    },
    // 查询表头数据
    async getMonthHeaders(data = { id: this.assessmentId }) {
      let that = this
      let res = await getMonthHeaders(data)
      if (res.code === 200) {
        that.columns = res.data
        let obj = {
          'dataIndex': 'serial',
          'formId': null,
          'title': '序号',
          'code': '0',
          'sort': 0,
          'inputType': null,
          scopedSlots: { customRender: 'serial' }
        }
        that.columns.unshift(obj)


        let objScore = {}   // 实际评分
        let objScore1 = {}   // 实际考核人员
        let objScore2 = {}   // 状态

        let objScore3 = {}   // 扣分标准
        let objScore4 = {}   // 主要检查内容


        this.columns.forEach(function(objs, i) {
          objScore = that.columns.filter(item => item.title == '实际评分')
          objScore1 = that.columns.filter(item => item.title == '实际考核人员')
          objScore2 = that.columns.filter(item => item.title == '状态')

          objScore3 = that.columns.filter(item => item.title == '扣分标准')
          objScore4 = that.columns.filter(item => item.title == '主要检查内容')

        })

        objScore[0].scopedSlots = { customRender: objScore[0].dataIndex }
        objScore1[0].scopedSlots = { customRender: objScore1[0].dataIndex }
        objScore2[0].scopedSlots = { customRender: objScore2[0].dataIndex }
        objScore3[0].scopedSlots = { customRender: objScore3[0].dataIndex }
        objScore4[0].scopedSlots = { customRender: objScore4[0].dataIndex }

        that.scoreIndex = objScore[0].dataIndex
        that.scoreIndex1 = objScore1[0].dataIndex
        that.scoreIndex2 = objScore2[0].dataIndex
        that.scoreIndex3 = objScore3[0].dataIndex
        that.scoreIndex4 = objScore4[0].dataIndex
      }
    },
    // 查询季度考核内容
    async getMonthContent(data = { id: this.assessmentId }) {
      this.data = []
      let res = await getMonthContent(data)
      if (res.code === 200) {
        this.data = res.data.list
        this.dels.assessmentScore = res.data.assessmentScore
        this.dels.assessmentLevel = res.data.assessmentLevel
        return res.data
      }
      return null
    },
    // 查询季度考核时间
    getAssessmentTime(val) {
      this.dels.assessmentTime = val
    },
    // 查询季度考核详情
    async getData() {
      this.loading = true
      let res = await getQuarterDetails(this.assessmentId)
      if (res.code === 200) {
        this.dels = res.data
        this.unit = this.dels.branch + '/' + this.dels.projectName
        await this.getQuarterlyReq()
      }
      await this.getMonthHeaders()
      await this.getMonthContent()
      this.loading = false
    },
    // 下拉滚动加载
    scrollMore(e) {
      const { target } = e
      let total = target.scrollTop + target.offsetHeight
      let scrollHeight = target.scrollHeight
      // this.pageNo是当前页 this.totalPage是总页数
      if (total >= scrollHeight - 3 && total < scrollHeight + 3 && this.pageNo <= this.totalPages) {
        this.pageNo = this.pageNo + 1
        this.getQuarterlyReq() // 调用api方法
      }
    },
    // 查询季度时间
    async getQuarterlyReq() {
      let res = await getQuarterly({
        subContractorId: this.dels.subContractorId,
        pageNo: this.pageNo,
        pageSize: this.pageSize
      })
      if (res.code === 200) {
        this.assessmentTimes = res.data
        this.totalPages = res.totalPages
      }
    },
    // 考核时间搜索
    async searchData() {
      let data = { subcontractorId: this.dels.subContractorId, assessmentTime: this.dels.assessmentTime }
      this.loading = true
      let res = await this.getMonthContent(data)
      if (res) {
        if (res.id) {
          await this.getMonthHeaders({ id: res.id })
        } else {
          this.$noticeWarning('没有查询到数据')
        }
      } else {
        this.$noticeWarning('没有查询到数据')
      }
      this.loading = false
    }
  }
}
</script>
<style scoped>
.notScore {
  width: 65px;
  display: flex
}
</style>

